<template>
  <div class="innerTableWrapper">
    <el-table :data="props.homework" border>
      <el-table-column label="文件名" prop="originName"></el-table-column>
      <el-table-column>
        <template v-slot="{ row }">
          <el-button @click="showMdDialog(row._id)" v-if="row.originName.includes('.md')" type="text">直接查看</el-button>
          <div v-if="!row.originName.includes('.md')">
            <el-button type="text" @click="copy(row.path)">复制文件名</el-button>
            <el-divider direction="vertical" />
            <el-link :href="'/api/'+row.path" :download="row.originName" type="primary">下载</el-link>
            <el-divider direction="vertical" />
            <el-button @click="showNotMdDialog(row._id)" type="text">评论</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()
const copy = async(text) => {
  try {
    await toClipboard(text)
    ElMessage.success('复制成功')
  } catch (e) {
    console.error(e)
  }
}
// eslint-disable-next-line
const props = defineProps({
  homework: Array
})
// eslint-disable-next-line
const emits = defineEmits(['showMdDialog'])
const showMdDialog = id => {
  emits('showMdDialog', id)
}
const showNotMdDialog = id => {
  emits('showNotMdDialog', id)
}
</script>
